<!-- WarehouseContent.vue -->
<template>
  <div class="warehouse-content">
    <!-- 子标签页 -->
    <div class="sub-tabs">
      <span
          v-for="(tab, index) in subTabs"
          :key="index"
          :class="{ 'active': activeSubTab === tab }"
          @click="setActiveSubTab(tab)"
      >
        {{ tab }}
      </span>
    </div>

    <!-- 子标签页内容 -->
    <component :is="currentSubComponent"></component>
  </div>
</template>

<script>
import ProductWarehouseContent from './ProductWarehouseContent.vue'
import TransitWarehouseContent from './TransitWarehouseContent.vue'
import TransitWarehouseTransportUnitContent from './TransitWarehouseTransportUnitContent.vue'

export default {
  name: 'WarehouseContent',
  components: {
    ProductWarehouseContent,
    TransitWarehouseContent,
    TransitWarehouseTransportUnitContent,
  },
  data() {
    return {
      activeSubTab: '产品仓库',
      subTabs: ['产品仓库', '中转仓库', '中转仓库运输单元'],
    }
  },
  computed: {
    currentSubComponent() {
      switch(this.activeSubTab) {
        case '产品仓库': return 'ProductWarehouseContent'
        case '中转仓库': return 'TransitWarehouseContent'
        case '中转仓库运输单元': return 'TransitWarehouseTransportUnitContent'
        default: return null
      }
    }
  },
  methods: {
    setActiveSubTab(tab) {
      this.activeSubTab = tab
    }
  }
}
</script>

<style scoped>
.warehouse-content {
  font-family: Arial, sans-serif;
}

.sub-tabs {
  display: flex;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.sub-tabs span {
  padding: 10px 15px;
  cursor: pointer;
}

.sub-tabs span.active {
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom: none;
}
</style>
